<template>
  <!-- 滞纳金 -->
  <div>
    <el-row>
      <el-col :span="16">
        <el-input
          :placeholder="$t('请输入滞纳金')"
          :disabled="readonly"
          @change="changeData"
          v-model="checkedData"
          show-word-limit
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-select v-model="selectData.unitCode" @change="changeUnit">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'lateFee',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      checkedData: '',
      readonly: false,
      selectData: {
        unitCode: '01',
      },
      options: [
        { value: '01', label: this.$t('%/天') },
        { value: '02', label: this.$t('总金额') },
      ],

      rules: {
        checkedData: [
          {
            required: this.parameter.state === 4,
            validator: (rule, value, callback) => {
              if (
                this.checkedData &&
                !/^\d{1,13}(\.\d{1,2})?$/.test(this.checkedData)
              ) {
                callback(
                  new Error(
                    this.$t('请输入小数点前13位以内，小数点后2位以内的数字')
                  )
                )
                return
              }
              if (!this.checkedData && this.parameter.state === 4) {
                callback(new Error(this.$t('请输入滞纳金')))
                return
              } else {
                callback()
                return
              }
            },
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    if (this.value) {
      this.setData()
    }
    this.$emit('setrules', this.parameter, {
      [this.parameter.parameterNumber]: this.rules.checkedData,
    })
  },
  methods: {
    changeData() {
      this.$emit('input', String(this.checkedData))
    },
    changeUnit(val) {
      let info = this.options.find((it) => it.value == val) || {}
      this.selectData.unitName = info.label
    },
    setData() {
      this.checkedData = JSON.parse(this.value).value
        ? JSON.parse(this.value).value
        : ''
      this.selectData = JSON.parse(this.value).selectData || {}
    },
    getData() {
      return {
        value: this.checkedData,
        selectData: this.selectData,
      }
    },
  },
}
</script>
